<template>
  <div class="users-base-wrapper">
    <div class="details-layout">
      <el-row style="text-align: left; margin-bottom: 16px;">
        <el-button type="primary" size="mini" @click="handleAdd">新增</el-button>
      </el-row>
      <el-table :data="ecPromptList" :stripe="true" :header-cell-style="{ background: 'rgba(117, 60, 202, 0.04)' }"
                style="width: 100%">
        <el-table-column type="index" label="序号" align="center" width="50">
        </el-table-column>
        <el-table-column prop="projectCode" align="center" label="研究代码">
          <template>
            <span>{{ projectCode }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="hintName" align="center" label="提示语名称"></el-table-column>
        <el-table-column prop="hintType" align="center" label="提示语类型"></el-table-column>
        <el-table-column prop="hintConfig" align="center" label="提示语设置"></el-table-column>
        <el-table-column prop="hintDesc" align="center" label="提示语说明"></el-table-column>
        <el-table-column align="center" label="操作" width="180">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end" style="height: 60px" align="middle">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageParams.pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-row>
    </div>
    <edit-record 
      :dialogVisible="dialogVisible" 
      :dialogTitle="dialogTitle" 
      :editData="editData"
      :searchParams="searchParams"
      @handleCancel="handleCancel"></edit-record>
  </div>
</template>updateEdcEcCharacterLength
<script>

import { mapActions } from 'vuex'
import editRecord from './component/edit-record.vue'

export default {
  name: 'ec-prompt',
  components: {
    editRecord
  },
  data() {
    return {
      ecPromptList: [],
      dialogVisible: false,
      editData: {},
      dialogTitle: '',
      pageParams: {
        pageSize: 10,
        pageNum: 1
      },
      total: 0,
      searchParams: {},
      projectCode: ''
    }
  },
  mounted() {
    this.searchParams = {
      projectId: localStorage.getItem('sys-project-id') || '',
    }
    this.projectCode = localStorage.getItem('sys-project-code') || ''
    this.getECPromptList()
  },

  methods: {
    ...mapActions('verificationRule', ['qryECPromptList', 'deleteECPrompt']),

    // 查询EC提示语列表
    getECPromptList() {
      const params = {
        ...this.searchParams,
        ...this.pageParams
      }
      this.qryECPromptList({ params }).then((res) => {
        const { data, code, message } = res
        if (code === 200) {
          this.ecPromptList = data.records || []
          this.total = data.total || 0
        } else {
          this.$message.error(message || '服务异常，请稍后重试!')
        }
      })
    },

    handleCancel(type) {
      this.dialogVisible = false
      if (type === 'refresh') {
        this.getECPromptList()
      }
    },

    // 编辑
    handleEdit(record) {
      this.editData = {
        ...record,
        projectCode: this.searchParams.projectId
      } 
      this.dialogVisible = true
      this.dialogTitle = '编辑'
    },

    // 新增
    handleAdd() {
      this.dialogVisible = true
      this.dialogTitle = '新增'
      this.editData = {
        projectCode: this.searchParams.projectId
      } 
    },

    handleDelete(row) {
      const params = {
        id: row.id
      }
      this.$confirm('确定删除该条数据吗？', '删除提示', {
        type: 'warning'
      }).then(res => {
        this.deleteECPrompt({ params })
          .then(res => {
            if (res.code === 200) {
              this.$message({ message: '删除成功', type: 'success' })
              this.getECPromptList()
            }
          })
      })
    },

    handleSizeChange(val) {
      this.pageParams.pageSize = val
      this.getECPromptList()
    },
    handleCurrentChange(val) {
      this.pageParams.pageNum = val
      this.getECPromptList()
    },

  },
}
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>
